<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="../js/css.js"></script>
    <link rel="stylesheet" href="../css/mescroll.min.css">
    <script src="../js/mescroll.min.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
        /*mescroll滚动的区域*/
        .mescroll {
            position: fixed;
            top: 0px;
            bottom: 0;
            height: auto;
        }
        
    </style>
</head>

<body>
<div id="vue-box">
    <!--滑动区域-->
    <div id="mescroll" class="mescroll">
        <!--展示上拉加载的数据列表-->
        <ul class="data-list" v-cloak>
            <li v-for="pd in pageList">
                <img class="pd-img"  src=""/>
                <p class="pd-name">{{pd.pdName}}</p>
                <p class="pd-price">{{pd.pdPrice}} 元</p>
                <p class="pd-sold">已售{{pd.pdSold}}件</p>
            </li>
        </ul>
    </div>
</div>


</body>
<script src="../js/config.js"></script>


<!--模拟的数据-->
<!--<script src="../res/pageList1.js" type="text/javascript" charset="utf-8"></script>-->
<script type="text/javascript" charset="utf-8">

    //创建vue对象
    var vm = new Vue({
        el: "#vue-box",
        data: {
            mescroll: null,
            pageList: []
        },
        mounted: function () {
            //创建MeScroll对象,down可以不用配置,因为内部已默认开启下拉刷新,重置列表数据为第一页
            //解析: 下拉回调默认调用mescroll.resetUpScroll(); 而resetUpScroll会将page.num=1,再执行up.callback,从而实现刷新列表数据为第一页;
            var self = this;
            self.mescroll = new MeScroll("mescroll", { //请至少在vue的mounted生命周期初始化mescroll,以确保您配置的id能够被找到
                up: {
                    callback: self.upCallback, //上拉回调
                    //以下参数可删除,不配置
                    isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
                    page: {size: 8}, //可配置每页8条数据,默认10
                    toTop: { //配置回到顶部按钮
                        src: "../img/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
                        //html: null, //html标签内容,默认null; 如果同时设置了src,则优先取src
                        //offset : 1000
                    },
                    empty: { //配置列表无任何数据的提示
                        warpId: "vue-box",
//							icon : "../res/img/mescroll-empty.png" ,
                        tip: "亲,暂无相关数据哦~",
//						  	btntext : "去逛逛 >" ,
//						  	btnClick : function() {
//						  	}
                    },
                    lazyLoad: {
                        use: true // 是否开启懒加载,默认false
                    }
                    //vue的案例请勿配置clearId和clearEmptyId,否则列表的数据模板会被清空
                    //vue的案例请勿配置clearId和clearEmptyId,否则列表的数据模板会被清空
//						clearId: "dataList",
//						clearEmptyId: "dataList"
                }
            });

        },
        methods: {
            //上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
            upCallback: function (page) {
                //联网加载数据
                var self = this;
                getListDataFromNet(page.num, page.size, function (curPageData, totalPage) {
//						curPageData=[]; //打开本行注释,可演示列表无任何数据empty的配置

                    //如果是第一页需手动制空列表 (代替clearId和clearEmptyId的配置)
                    if (page.num == 1) self.pageList = [];

                    //更新列表数据
                    self.pageList = self.pageList.concat(curPageData);

                    //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
                    //mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
                    console.log("page.num=" + page.num + ", page.size=" + page.size + ", curPageData.length=" + curPageData.length + ", self.pageList.length==" + self.pageList.length);

                    //方法一(推荐): 后台接口有返回列表的总页数 totalPage
                    self.mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)

                }, function () {
                    //联网失败的回调,隐藏下拉刷新和上拉加载的状态;
                    self.mescroll.endErr();
                });
            },
        },
    });
    function getListDataFromNet(pageNum, pageSize, successCallback, errorCallback) {
        setTimeout(function () {  //模拟网路
            //          	axios.get("xxxxxx", {
//					params: {
//						num: pageNum, //页码
//						size: pageSize //每页长度
//					}
//				})
//				.then(function(response) {
            var tolPag = 2;
            var listData = [
                {
                    "pdImg": "../res/img/pd1.jpg",
                    "pdName": "【1】  六罐装荷兰美素佳儿金装2段900g",
                    "pdPrice": 1149.00,
                    "pdSold": 648
                }, {
                    "pdImg": "../res/img/pd2.jpg",
                    "pdName": "【2】  韩国Amore爱茉莉红吕洗发水套装修复受损发质",
                    "pdPrice": 89.00,
                    "pdSold": 128
                }, {
                    "pdImg": "../res/img/pd3.jpg",
                    "pdName": "【3】  Friso美素佳儿 金装婴儿配方奶粉3段900g",
                    "pdPrice": 195.00,
                    "pdSold": 968
                }, {
                    "pdImg": "../res/img/pd4.jpg",
                    "pdName": "【4】  Fisher pdPrice费雪 费雪三轮儿童滑行车",
                    "pdPrice": 299.00,
                    "pdSold": 85
                }, {
                    "pdImg": "../res/img/pd5.jpg",
                    "pdName": "【5】  Babylee巴布力 实木婴儿床 雷卡拉130*70cm",
                    "pdPrice": 1889.00,
                    "pdSold": 18
                }, {
                    "pdImg": "../res/img/pd6.jpg",
                    "pdName": "【6】  Pigeon贝亲 独立三层奶粉盒 送小罐奶粉1段200g",
                    "pdPrice": 70.00,
                    "pdSold": 658
                }, {
                    "pdImg": "../res/img/pd7.jpg",
                    "pdName": "【7】 TTBOO兔兔小布 肩纽扣套装",
                    "pdPrice": 268.00,
                    "pdSold": 128
                }, {
                    "pdImg": "../res/img/pd8.jpg",
                    "pdName": "【8】  Nuna璐拉 婴儿布里奇果精纯嫩肤沐浴露婴儿精纯芦荟胶",
                    "pdPrice": 140.00,
                    "pdSold": 366
                }
            ];//模拟分页数据
            if (pageNum == 2) {
                listData = [
                    {
                        "pdImg": "../res/img/pd1.jpg",
                        "pdName": "【9】  六罐装荷兰美素佳儿金装2段900g",
                        "pdPrice": 1149.00,
                        "pdSold": 648
                    }, {
                        "pdImg": "../res/img/pd2.jpg",
                        "pdName": "【10】  韩国Amore爱茉莉红吕洗发水套装修复受损发质",
                        "pdPrice": 89.00,
                        "pdSold": 128
                    }, {
                        "pdImg": "../res/img/pd3.jpg",
                        "pdName": "【11】  Friso美素佳儿 金装婴儿配方奶粉3段900g",
                        "pdPrice": 195.00,
                        "pdSold": 968
                    }, {
                        "pdImg": "../res/img/pd4.jpg",
                        "pdName": "【12】  Fisher pdPrice费雪 费雪三轮儿童滑行车",
                        "pdPrice": 299.00,
                        "pdSold": 85
                    }, {
                        "pdImg": "../res/img/pd5.jpg",
                        "pdName": "【13】  Babylee巴布力 实木婴儿床 雷卡拉130*70cm",
                        "pdPrice": 1889.00,
                        "pdSold": 18
                    }, {
                        "pdImg": "../res/img/pd6.jpg",
                        "pdName": "【14】  Pigeon贝亲 独立三层奶粉盒 送小罐奶粉1段200g",
                        "pdPrice": 70.00,
                        "pdSold": 658
                    }, {
                        "pdImg": "../res/img/pd7.jpg",
                        "pdName": "【15】 TTBOO兔兔小布 肩纽扣套装",
                        "pdPrice": 268.00,
                        "pdSold": 128
                    }, {
                        "pdImg": "../res/img/pd8.jpg",
                        "pdName": "【16】  Nuna璐拉 婴儿布里奇果精纯嫩肤沐浴露婴儿精纯芦荟胶",
                        "pdPrice": 140.00,
                        "pdSold": 366
                    }
                ];
            }
            if (pageNum == 3) {
                listData = []
            }
//            listData = []
            successCallback && successCallback(listData, tolPag);//成功回调
//				})
//				.catch(function(error) {
//					errorCallback&&errorCallback()//失败回调
//				});
        }, 800)


    }

</script>

</html>